<template>
  <div data-tauri-drag-region class="title-bar--container">
    <div class="left__title">
      <img src="../assets/images/avatar.png">
      {{ $t('app.title') }}
    </div>
    <div class="right__operation">
      <div class="icon_item" @click="handleControlWins('minimize')">
        <n-icon :size="18" color="#fff">
          <RemoveSharp />
        </n-icon>
      </div>
      <div class="icon_item" @click="handleControlWins('fullscreen')">
        <n-icon :size="14" color="#fff">
          <ScanOutline />
        </n-icon>
      </div>
      <div class="icon_item"  @click="handleControlWins('close')">
        <n-icon :size="18" color="#fff">
          <Close />
        </n-icon>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="TitleBar">
import { Close,RemoveSharp,ScanOutline } from '@vicons/ionicons5';
import { controlWindow } from '@/utils/windows';
const handleControlWins = (type:'hide' | 'show' | 'fullscreen' | 'minimize' | 'close' | 'resize')=>{
  controlWindow('main',type);
}
</script>
<style lang="scss" scoped>
@use "sass:color";
.title-bar--container {
  @include useTheme {
    background: getVar('titleBarBg');
  }

  ;
  height:100%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;

  .left__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap:6px;
    img{
      width:16px;
      height: 16px;
      display: block;
      border-radius: 50%;
    }
    color: #fff;
    font-size: 0.9em;
    height: 100%;
    margin-left: 1em;
  }

  .right__operation {
    display: flex;
    height: 100%;
    gap: 6px;
    align-items: center;

    .icon_item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 25px;
      height: 25px;

      &:hover {
        @include useTheme {
          background: color.adjust(getVar('titleBarBg'), $lightness: 15%);
        };
      }
    }
  }
}
</style>
